<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file"> <br>
    <!-- img src上面只能放地址 或者 base64 -->
    <img src="">
    <button id="btn">上传图片</button>
    <script>
        // 是否可以监听
        var input = document.querySelector("input")
        var btn = document.querySelector("#btn")
        var img = document.querySelector("img")
        input.onchange = function() {   
            console.log("选择了")
            console.log(input.files[0])
            var fr = new FileReader(); // 文件读取
            fr.readAsDataURL(input.files[0])
            fr.onload = function() {
                console.log(fr.result)
                img.src = fr.result
            }
        }

        btn.onclick = function() {
            // 1.POST
            // 2.POST请求必须设置头部 （Form-data）
            // 3.需要提交内容  （文件提交上去）
            // 文件流 ，上传图片 直接上传文件流即可。
            var xhr = new XMLHttpRequest();
            xhr.open("post", "http://127.0.0.1:3000")
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText)
                }
            }
            xhr.setRequestHeader("content-Type", "application/Form-data")

            var fd = new FormData();
            fd.append("file", input.files[0])
            xhr.send(fd);
            console.log(input.files[0])
        }
    </script>
</body>
</html>